<template>
	<view>
		<!--基础信息-->
		<view class="btName">基础信息</view>
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">费用名称
				<text class="redXingh">*</text>
			</text>
			<u-input v-model="name" input-align="right" placeholder="请输入支出费用名称" />
		</view>
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">支出金额
				<text class="redXingh">*</text>
			</text>
			<u-input v-model="money" input-align="right" placeholder="请输入支出金额" />
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">支出日期<text class="redXingh">*</text></text>
			<picker mode="date" :value="handle_date" start="1999-02-15" end="2100-02-15" @change="bindDateChange">
				<view v-if="handle_date" class="w420">{{handle_date}}</view>
				<view v-else style="color: #c5c5c5;">请选择支出日期</view>
			</picker>
			<u-icon class="ml26" name="calendar" size="40" color="#888888"></u-icon>
		</view>
		<view @click="pickerSelectFun('bank')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">银行卡号
				<text class="redXingh">*</text>
			</text>
			<view :class="bank_name ? '' : 'cBlack'">
				{{bank_name ? bank_name : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view @click="pickerSelectFun('expenses_type')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">费用类型
				<text class="redXingh">*</text>
			</text>
			<view :class="type_name ? '' : 'cBlack'">
				{{type_name ? type_name : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<!-- 		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">经手人员</text>
			<u-input v-model="handle_user_name" input-align="right" placeholder="请输入经手人员" />
		</view> -->
		<view class="flex-white-plr26-column ptb20 ">
			<view style="margin-bottom: 8rpx;">
				<text>备注</text>
			</view>
			<u-input v-model="remark" type="textarea" :border="true" :height="100" :auto-height="true" />
		</view>


		<view class=""></view>

		<!--提交按钮-->
		<view class="submitView">
			<u-button type="primary" class="submitBtn" :ripple="true" ripple-bg-color="#909399" @click="submitBtn">
				{{pageType ? '保存' : '提交'}}
			</u-button>
		</view>
		<!--组件-->
		<u-select v-model="selectShow" :list="selectList" @confirm="selectConfirmFun"></u-select>
	</view>
</template>

<script>
	let that = ''
	import {
		getDayFun,
		getNowDate
	} from '@/utils/date.js'
	import {
		apiFinExpensesRecord,
		apiFinBankAccount,
		apiFinExpensesType,
		apiFinIncomeType
	} from '@/api/crm.js'
	export default {
		data() {
			return {
				selectShow: false,
				selectCommData: [], //选择数据
				selectList: [],
				record_no: '',
				name: '',
				money: '',
				handle_date: '',
				bank_id: '',
				bank_name: '',
				type_id: '',
				type_name: '',
				remark: '',
				handle_user_id: uni.$userInfo.id,
				handle_user_name: uni.$userInfo.realname,
				owner_user_id: uni.$userInfo.id,
				create_user_id: uni.$userInfo.id,
				xgInfoObj: {},
				pageType: ''
			}
		},
		onLoad(e) {
			that = this;
			if (e.type == 'update') {
				that.setDataFun();
				that.pageType = 'update';
				uni.setNavigationBarTitle({
					title: '修改信息'
				})
			}

			that.getSelectCommData()

		},
		onBackPress() {

		},
		methods: {
			// 展示相应数据选择框
			pickerSelectFun: function(str) {
				if (str == 'bank') {
					that.selectList = that.selectCommData['bank']
				} else if (str == 'expenses_type') {
					that.selectList = that.selectCommData['expenses_type']
				} else if (str == 'sys_user') {
					that.selectList = that.selectCommData['sys_user']
				}
				that.selectShow = true;
				that.selectType = str;
			},
			// 选择框选中事件
			selectConfirmFun: function(e) {

				if (that.selectType == 'bank') {
					that.bank_id = e[0].value;
					that.bank_name = e[0].label;
				} else if (that.selectType == 'expenses_type') {
					that.type_id = e[0].value;
					that.type_name = e[0].label;
				} else if (that.selectType == 'sys_user') {
					that.bus_type = e[0].value;
					that.bus_type_name = e[0].label;
				}

				console.log(that.bank_name);

			},
			//选择时间绑定
			bindDateChange: function(e) {
				that.handle_date = e.detail.value;
			},
			// 提交数据
			submitBtn: function() {
				if (!that.name) {
					uni.$myModalFun('费用名称不能为空！')
					return
				}
				if (that.money == '') {
					uni.$myModalFun('金额不能为空！');
					return
				}
				if (that.handle_date == '') {
					uni.$myModalFun('日期不能为空！');
					return
				}

				console.log('dddd');

				let req = {
					//基本信息
					name: that.name,
					bank_id: that.bank_id,
					bank_name: that.bank_name,
					type_id: that.type_id,
					type_name: that.type_name,
					money: that.money,
					handle_date: that.handle_date,
					handel_user_id: that.handel_user_id,
					remark: that.remark,

					//系统信息
					handle_user_id: that.owner_user_id,
					sys_user_id: that.owner_user_id

				}
				let reqObj = {
					req
				}

				let action = 'add';

				if (that.pageType == 'update') {
					action = 'update'
					reqObj.req.id = that.xgInfoObj.id;
					reqObj.req.handle_user_id = uni.$userInfo.id;
					uni.showLoading({
						title: '修改中...'
					})
				} else {
					reqObj.req.create_user_id = uni.$userInfo.id;
					uni.showLoading({
						title: '提交中...'
					})
				}
				let reqData = {
					action: action,
					params: reqObj
				}
				console.log(reqObj);
				apiFinExpensesRecord(reqData)
					.then(res => {
						if (action == 'update') {
							uni.showToast({
								title: '费用修改成功',
								icon: 'none',
								duration: 1000,
								mask: true
							});
							uni.$hkdInfo = reqObj.req;
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else {
							uni.showToast({
								title: '费用新增成功',
								icon: 'none',
								duration: 1000,
								mask: true
							})
							reqObj.req.id = res.data;
							uni.$emit('addHkdItemInListFun')
							setTimeout(() => {
								uni.redirectTo({
									url: './detail?index=0&fromDetail=true&id=' + res.data
								})
							}, 1000)
						}
					})
			},
			// 数据恢复
			setDataFun: function() {
				let obj = uni.$infoObj
				that.xgInfoObj = uni.$infoObj
				console.log(obj);
				//基本信息
				that.name = obj.name
				that.bank_id = obj.bank_id
				that.bank_name = obj.bank_name
				that.type_id = obj.type_id
				that.type_name = obj.type_name
				that.money = obj.money
				that.handle_date = obj.handle_date
				that.handel_user_id = obj.handel_user_id
				that.remark = obj.remark

			},
			// 获得公共选择数据
			getSelectCommData: function(str) {

				let that = this;

				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let reqData = {
					action: 'get_list',
				}

				apiFinBankAccount(reqData)
					.then(res => {
						console.log(res);

						let dataArr = res.data;
						let rowData = [];
						for (var key in dataArr) {
							rowData.push({
								label: dataArr[key].name,
								value: dataArr[key].id
							})
						}
						console.log(rowData);
						that.selectCommData['bank'] = rowData;
					})

				apiFinExpensesType(reqData)
					.then(res => {
						console.log(res);

						let dataArr = res.data;
						let rowData = [];
						for (var key in dataArr) {
							rowData.push({
								label: dataArr[key].name,
								value: dataArr[key].id
							})
						}
						console.log(rowData);
						that.selectCommData['expenses_type'] = rowData;
					})

				apiFinIncomeType(reqData)
					.then(res => {
						console.log(res);

						let dataArr = res.data;
						let rowData = [];
						for (var key in dataArr) {
							rowData.push({
								label: dataArr[key].name,
								value: dataArr[key].id
							})
						}
						console.log(rowData);
						that.selectCommData['income_type'] = rowData;
					})




				setTimeout(() => {
					uni.hideLoading()
				}, 188);

			},
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
		padding-bottom: 180rpx;
	}
</style>
